/**
 * 1. 记录传入的选项，设置 $data, $el
 * 2. 把 data 成员属性，转换成 getter 和 setter，注入到 Vue 实例
 * 3. 调用 observer 实现数据响应式处理
 * 4. 调用 compiler 编译指令和插值表达式
 */
class Vue {constructor(options) {
        this.$options = options || {};
        this.$data = options.data || {};
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;
        this._proxyData(this.$data);
        this.initMethods(options.methods || {})
        new Observer(this.$data);
        new Compiler(this)
    }
    _proxyData(data) {
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key, {
                configurable: true,
                enumerable: true,
                get() {
                    return data[key]
                },
                set(newValue) {
                    if(newValue === data[key]) return;
                    console.log("set -> newValue", newValue)
                    data[key] = newValue;
                }
            })
        })
    }
    initMethods(methods) {
        Object.keys(methods).forEach(key => {
            this[key] = methods[key]
        })
    }
}